<template>
    <section>
        <div class="list-group poi-container">
            <div class="group-title" >商家信息</div>
            <div class="group-item dd-padding">
                <div class="merchant-card">
                    <div class="biz-detail">
                        <a href="/i/poi/160807509" class="detail-info">
                     
                        <h5 class="title single-line" >一把骨</h5>
                        <div class="address single-line" >四川师范大学前门</div>
                        <div class="dist" >
                            <span class="text-icon icon-sp icon-location">
                                </span><span ></span>
                                <span class="dist-title" >离我最近</span>
                        </div>
                        </a>
                    </div>
                        <div class="biz-call">
                            <a href="javascript:;" class="phone" >
                                <div class="icon-sp icon-tel" >
                                </div>
                            </a>
                    </div>
                </div>
            </div>
                <div style="display:none;" class="">
                    <div class="meishi-msg-bg"></div>
                        <div id="msg" class="msg-option">
                            <div class="msg-bd">拨打电话</div>
                                <div class="msg-option-btns">                                    
                                </div>
                                <button type="button" class="btn msg-btn-cancel">取消</button>
                            </div>
                </div>
        </div>
        <div class="list-group menu-container">
            <div class="group-title">套餐</div>
            <div class="menu">
                <div>
                    <div>
                        <div></div>
                        <div class="menu-item menu-head head-center">骨头</div>
                        <div>
                            <div class="menu-item menu-tr">
                                <span class="left">一根骨</span>
                                <span class="middle">1 个</span>
                                <span class="right">70元</span>
                            </div>
                        </div>
                        <div class="menu-item menu-head head-center">冷饮</div>
                        <div>
                            <div class="menu-item menu-tr">
                                <span class="left">雪花牛肉</span>
                                <span class="middle">1 份</span>
                                <span class="right">42元</span>
                            </div>
                        </div>
                    </div>
                    <div class="menu-item menu-explanation">
                        <ul></ul>
                    </div>
                </div>
            </div>
            <a href="javascript:;" class="more-text">
               
                <div class="more">
                    查看图文详情
                </div>
            </a>
            <div style="display:none;">
                <div class="meishi-msg-bg">
                </div>
                <div class="meishi-msg-doc">
                    <!-- /react-text -->
                    <div class="meishi-msg-bd"></div>
                    <div class="meishi-msg-ft">
                        <a href="javascript:;" class="meishi-msg-btn meishi-msg-btn-cancel">取消</a>
                        <a href="javascript:;" class="meishi-msg-btn meishi-msg-btn-ok">确定</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>
<style scoped>
.list-group {
  border-top: 1px solid #ddd8ce;
  border-bottom: 1px solid #ddd8ce;
  margin-top: 0.2rem;
  margin-bottom: 0;
  background-color: #fff;
}
.group-title {
  border-bottom: 1px solid #ddd8ce;
  font-size: 0.34rem;
  line-height: 1.5;
  padding: 0.22rem 0.2rem 0.14rem 0.2rem;
  color: #333;
}
.merchant-card {
  display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-box-align: center;
}
.merchant-card {
  display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-box-align: center;
}
.merchant-card .biz-detail .detail-info {
  display: block;
}
.merchant-card .biz-detail h5 {
  margin-top: 0;
  margin-bottom: 0.06rem;
  font-size: 0.32rem;
  color: #000;
}
.merchant-card .biz-detail .address {
  padding-right: 0.2rem;
  color: #666;
}
.merchant-card .dist {
  margin-top: 0.14rem;
  line-height: 1.1;
  color: #666;
}
.icon-sp {
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 1.62rem 1.56rem;
    vertical-align: middle;
}
* {
    max-height: 999999px;
}
.merchant-card .dist .dist-title {
  margin-left: 0.3rem;
  color: #eb8706;
}
.merchant-card .biz-call {
  width: 1.4rem;
  text-align: center;
  border-left: 1px solid #ddd8ce;
  font-size: 0.5rem;
  height: 1.2rem;
  line-height: 1.2rem;
  color: #06c1ae;
}
.merchant-card .biz-call .phone {
  display: block;
  height: 100%;
}
.icon-sp {
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 1.62rem 1.56rem;
    vertical-align: middle;
}
.meishi-msg-bg {
  background: rgba(0, 0, 0, 0.4);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1000;
}
.meishi-msg-btn {
  display: block;
  -webkit-box-flex: 1;
          flex: 1;
  margin-right: -1px;
  border-right: 1px solid #d8d8d8;
  height: 0.88rem;
  line-height: 0.88rem;
  text-align: center;
  color: #06c1ae
}
.msg-option {
  bottom: 0.5rem;
  position: fixed;
  left: 0.3rem;
  right: 0.3rem;
  border-radius: 0.06rem;
  background: none;
  overflow: hidden;
  z-index: 1001;
  animation-name: slideup;
  animation-duration: 0.3s;
  -webkit-animation-name: slideup;
  -webkit-animation-duration: 0.3s;
}
.menu-table .menu-item.menu-head {
  margin-left: 0;
}
.menu-table .menu-item:last-of-type {
  margin-left: 0;
  padding-left: 0.2rem;
}
.menu-table .menu-tr .left {
  flex: 1;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  display: block;
  padding: 0.22rem 0;
  padding-right: 0.2rem;
}
.menu-table .menu-tr .middle {
  display: -webkit-box;
  display: -ms-flexbox;
  -webkit-box-align: center;
  -ms-box-align: center;
  width: 1.7rem;
  padding: 0.22rem 0.2rem;
  border-left: 1px solid #ccc;
}
.menu-table .menu-tr .right {
  display: -webkit-box;
  display: -ms-flexbox;
  -webkit-box-align: center;
  -ms-box-align: center;
  width: 1.2rem;
  padding: 0.22rem 0.2rem;
  border-left: 1px solid #ccc;
}
.menu-container .meishi-msg-bg {
  background: rgba(0, 0, 0, 0.7);
}
.menu-container .meishi-msg-doc {
  left: 0.3rem;
  right: 0.3rem;
  top: 38%;
}
.menu-container .meishi-msg-doc .meishi-msg-bd {
  font-size: 0.34rem;
  padding: 0.43rem;
  line-height: 1.21;
  border-bottom: 1px solid #d8d8d8;
}
.meishi-msg-doc .meishi-msg-ft {
  display: -webkit-box;
  display: flex;
  font-size: 0.34rem;
}
.menu-explanation {
  position: relative;
  padding: 0.28rem 0.2rem;
  margin: 0;
  border-bottom: 1px solid #ddd8ce;
  overflow: hidden;
  font-weight: 400;
}
.menu-explanation ul {
  list-style-type: disc;
  padding-left: 0.4rem;
}
.more-text {
  display: block;
  color: #06c1ae;
  padding: 0 0.2rem;
  height: 0.8rem;
  line-height: 0.8rem;
  font-size: 0.3rem;
}
.more:after {
  border-color: #666;
  position: absolute;
  right: 0.25rem;
  top: 50%;
  display: block;
  content: '';
  width: 0.6em;
  height: 0.6em;
  border-left: 0.04rem solid #06c1ae;
  border-bottom: 0.04rem solid #06c1ae;
  transform: translateY(-50%) scaleY(0.7) rotateZ(-135deg);
  -webkit-transform: translateY(-50%) scaleY(0.7) rotateZ(-135deg);
  -moz-transform: translateY(-50%) scaleY(0.7) rotateZ(-135deg);
  -ms-transform: translateY(-50%) scaleY(0.7) rotateZ(-135deg);
}
</style>
